﻿@using Abp.Json
@using PearAdmin.AbpTemplate.Authorization.Roles.Dto
@model GetRoleForEditOutput

@section styles{
    <link href="~/css/pear-tree/dtree.css" rel="stylesheet" />
    <link href="~/css/pear-tree/font/dtreefont.css" rel="stylesheet" />
    <style type="text/css">
        .layui-tab {
            margin-top: 0px;
        }
    </style>
}

<div class="layui-tab layui-tab-brief" lay-filter="role-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">角色信息</li>
        <li>权限信息</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" lay-filter="role-form" style="padding: 15px 0 0 0;">
                <input type="hidden" name="id" />
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否默认</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="isStatic" lay-skin="switch">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-hide" lay-submit lay-filter="role-submit" id="role-submit">提交</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <div style="overflow: auto;">
                <ul id="permission-tree" class="dtree" data-id=""></ul>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        layui.use(['abp', 'element', 'form', 'dtree'], function () {
            var $ = layui.$;
            var abp = layui.abp;
            var form = layui.form;
            var element = layui.element;
            var dtree = layui.dtree;

            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.iframeAuto(index);

            form.val("role-form", @Html.Raw(JsonExtensions.ToJsonString(Model.Role,true,false)));
            form.render();

            dtree.render({
				elem: "#permission-tree",
                initLevel: "2",
                data: @Html.Raw(JsonExtensions.ToJsonString(Model.Permissions, true, false)),
                width: "100%",
                height: "300",
                line: true,
                checkbar: true,
				ficon: ["1", "-1"],
				icon: ["0", "2"],
                response: {
                    message: "msg",
                    statusCode: 200,
                    title: "displayName"
                },
                dataStyle: "layuiStyle",
                dataFormat: "list"
            });

            window.submitForm = function(){
                $("#role-submit").click();
            }

            form.on('submit(role-submit)', function (data) {
                data.field.isStatic = data.field.isStatic == "on";//switch默认值是on
                data.field.grantedPermissionNames = getRolePermissions();

                var waitIndex = parent.layer.load(2);
                abp.ajax({
                    url: "@Url.Action(Model.Role.Id > 0? "UpdateRole": "CreateRole", "Roles")",
                    data: JSON.stringify(data.field),
                    abpHandleError: false
                }).done(function (data) {
                    if (data.code == 200) {
                        data.index = index;
                        let parentWindow = parent.selectedWindow().window;
                        parentWindow.saveCallback(data);
                    }
                }).fail(function (jqXHR) {
                    parent.layer.msg(jqXHR.message, { icon: 5 });
                }).always(function () {
                    parent.layer.close(waitIndex);
                });

                return false;
            });

            element.on('tab(role-tab)', function(data){
                parent.layer.iframeAuto(index);
            });

            function getRolePermissions() {
                var selectedNode = dtree.getCheckbarNodesParam("permission-tree");
                var ids = selectedNode.map(function (d) { return d.nodeId });
                return ids;
            }
        });
    </script>
}

